<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onload=function(){
		//1.根据ID查询节点
		//2.根据标签名查询节点
		//3.根据NAME查询节点
		var radios=document.getElementsByTagName("sex");
		console.log(radios);
		//4.根据层次(关系)查询节点
		//即,查询某节点的亲属
		//1)父亲
		var gz=document.getElementById("gz");
		var ul=gz.parentNode;
		console.log(ul);
		//2)孩子
		//带文本\空格
		console.log(ul.childNodes);
		//只带元素
		var lis=ul.getElementsByTagName("li");
		console.log(lis);
		//3)兄弟
		//节点.父亲.孩子们[i]
		var li1=gz.parentNode.getElementsByTagName("li")[1];
		console.log(li1);
	}
	//追加节点
	function f1() {
		//创建新节点
		var li=document.createElement("li");
		//设置新节点
		li.innerHTML="石家庄";
		//将其追加到ul下
		var ul=document.getElementById("city");
		ul.appendChild(li);
		
	}
	//插入节点
	function f2() {
		var li=document.createElement("li");
		li.innerHTML="吉林长春";
		var ul=document.getElementById("city");
		var gz=document.getElementById("gz");
		ul.insertBefore(li, gz);
	}
	//删除节点
	function f3() {
		var ul=document.getElementById("city");
		var gz=document.getElementById("gz");
		//通过父亲删除孩子
		ul.removeChild(gz);
	}
</script>
</head>
<body>
	性别:
	<input type="radio" name="sex"/>男
	<input type="radio" name="sex"/>女
	<ul id="city">
		<li>北京</li>
		<li>上海</li>
		<li id="gz">广州</li>
		<li>深圳</li>
		<li>南京</li>
	</ul>
	<p>
		<input type="button" value="追加" onclick="f1();"/>
		<input type="button" value="插入" onclick="f2();"/>
		<input type="button" value="删除" onclick="f3();"/>
	</p>
</body>
</html>
















